<template>
  <div style="padding: 20px">
    <Alert message="提示信息示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">气泡</div>
    <div class="demoTittle2"
      >气泡使用组件a-tooltip，设置属性placement弹出方向，title标题，color背景颜色</div
    >
    <a-space :size="100">
      <a-tooltip placement="right" title="教育培训" color="#000000CC">
        <a-button>自动调整</a-button>
      </a-tooltip>
      <a-tooltip placement="bottom" color="#000000CC">
        <a-button>自动调整</a-button>
        <template #title>
          <a-space direction="vertical" :size="0">
            <div class="titleBox"
              >待执行的任务<a-badge
                count="100"
                :numberStyle="{
                  height: '14px',
                  'line-height': '14px',
                  'box-shadow': 'none',
                  marginLeft: '8px',
                }"
            /></div>
            <div class="titleBox"
              >待我审核的<a-badge
                count="29"
                :numberStyle="{
                  height: '14px',
                  'line-height': '14px',
                  'box-shadow': 'none',
                  marginLeft: '8px',
                }"
            /></div>
            <div class="titleBox"
              >我提交的<a-badge
                count="6"
                :numberStyle="{
                  height: '14px',
                  'line-height': '14px',
                  'box-shadow': 'none',
                  marginLeft: '8px',
                }"
            /></div>
          </a-space>
        </template>
      </a-tooltip>
    </a-space>
    <div class="demoTittle">徽标数</div>
    <div class="demoTittle2"
      >徽标使用组件a-badge，设置dot为小红点，count为徽标数值或字符，a-badge-ribbon为使用缎带型的徽标。</div
    >
    <a-space :size="20">
      <a-badge dot>
        <a-button type="primary">主按钮</a-button>
      </a-badge>
      <a-button type="primary">
        <div style="display: flex; align-items: center">
          <span style="margin-right: 4px">主按钮</span>
          <a-badge
            count="100"
            :numberStyle="{
              height: '14px',
              'line-height': '14px',
              'box-shadow': 'none',
            }"
          />
        </div>
      </a-button>
      <a-badge :count="29"><a-button type="primary">主按钮</a-button></a-badge>
      <a-badge :count="6"><a-button type="primary">主按钮</a-button></a-badge>
      <a-badge
        count="new"
        :numberStyle="{
          backgroundColor: '#F5820F',
        }"
        ><a-button type="primary">主按钮</a-button></a-badge
      >
      <a-badge count="hot"><a-button type="primary">主按钮</a-button></a-badge>
    </a-space>
    <a-space direction="vertical" style="width: 100%">
      <a-badge-ribbon text="New" color="#1677FF">
        <a-card title="标题" size="small">内容</a-card>
      </a-badge-ribbon>
      <a-badge-ribbon text="New" color="#F8AC30"
        ><a-card title="标题" size="small">内容</a-card>
      </a-badge-ribbon>
      <a-badge-ribbon text="New" color="#FF4D4F">
        <a-card title="标题" size="small">内容</a-card>
      </a-badge-ribbon>
      <a-badge-ribbon text="New" color="#52C41A">
        <a-card title="标题" size="small">内容</a-card>
      </a-badge-ribbon>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
  }
  .titleBox {
    width: 136px;
    display: flex;
    align-items: center;
    padding: 10px 0 10px 8px;
    cursor: pointer;
  }
</style>
